<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <script src="http://d3js.org/d3.v2.js"></script>
  <script>
      <%=json_str%>
  </script>

  <style type="text/css">
      body {
          background: url(texture-noise.png);
          overflow: hidden;
          margin: 0;
          font-size: 14px;
          font-family: "Helvetica Neue", Helvetica;
      }

      #chart, #header, #footer {
          position: absolute;
          top: 0;
      }

      #header, #footer {
          z-index: 1;
          display: block;
          font-size: 36px;
          font-weight: 300;
          text-shadow: 0 1px 0 #fff;
      }

      #header.inverted, #footer.inverted {
          color: #fff;
          text-shadow: 0 1px 4px #000;
      }

      #header {
          top: 80px;
          left: 140px;
          width: 1000px;
      }

      #footer {
          top: 680px;
          right: 140px;
          text-align: right;
      }

      rect {
          fill: none;
          pointer-events: all;
      }

      pre {
          font-size: 18px;
      }

      line {
          stroke: #000;
          stroke-width: 1.5px;
      }

      .string, .regexp {
          color: #f39;
      }

      .keyword {
          color: #00c;
      }

      .comment {
          color: #777;
          font-style: oblique;
      }

      .number {
          color: #369;
      }

      .class, .special {
          color: #1181B8;
      }

      a:link, a:visited {
          color: #000;
          text-decoration: none;
      }

      a:hover {
          color: #666;
      }

      .hint {
          position: absolute;
          right: 0;
          width: 1280px;
          font-size: 12px;
          color: #999;
      }

      .chart {
          display: block;
          margin: auto;
          margin-top: 40px;
      }

      text {
          font-size: 11px;
      }

      rect {
          fill: none;
      }

  </style>
</head>

<body>
<div id="body">


  <div id="footer">
    d3.layout.treemap
    <div class="hint">click or option-click to descend or ascend</div>
    <div><select>
      <option value="size">Size</option>
      <option value="count">Count</option>
    </select></div>
  </div>


</div>

<script type="text/javascript">


    var w = 1280 - 80,
            h = 800 - 180,
            x = d3.scale.linear().range([0, w]),
            y = d3.scale.linear().range([0, h]),
            color = d3.scale.category20c(),
            root,
            node;

    var treemap = d3.layout.treemap()
            .round(false)
            .size([w, h])
            .sticky(true)
            .value(function (d) {
                return d.size;
            });

    var svg = d3
            .select("#body")
            .append("div")
            .attr("class", "chart")
            .style("width", w + "px")
            .style("height", h + "px")
            .append("svg:svg")
            .attr("width", w)
            .attr("height", h)
            .append("svg:g")
            .attr("transform", "translate(.5,.5)");

    function size(d) {
        return d.size;
    }

    function count(d) {
        return 1;
    }

    function zoom(d) {
        var kx = w / d.dx, ky = h / d.dy;
        x.domain([d.x, d.x + d.dx]);
        y.domain([d.y, d.y + d.dy]);

        var t = svg.selectAll("g.cell").transition()
                .duration(d3.event.altKey ? 7500 : 750)
                .attr("transform", function (d) {
                    return "translate(" + x(d.x) + "," + y(d.y) + ")";
                });

        t.select("rect")
                .attr("width", function (d) {
                    return kx * d.dx - 1;
                })
                .attr("height", function (d) {
                    return ky * d.dy - 1;
                })

        t.select("text")
                .attr("x", function (d) {
                    return kx * d.dx / 2;
                })
                .attr("y", function (d) {
                    return ky * d.dy / 2;
                })
                .style("opacity", function (d) {
                    return kx * d.dx > d.w ? 1 : 0;
                });

        node = d;
        d3.event.stopPropagation();
    }


    node = root = data;

    var nodes = treemap.nodes(root)
            .filter(function (d) {
                return !d.children;
            });

    var cell = svg.selectAll("g")
            .data(nodes)
            .enter().append("svg:g")
            .attr("class", "cell")
            .attr("transform", function (d) {
                return "translate(" + d.x + "," + d.y + ")";
            })
            .on("click", function (d) {
                return zoom(node == d.parent ? root : d.parent);
            });

    cell.append("svg:rect")
            .attr("width", function (d) {
                return d.dx - 1;
            })
            .attr("height", function (d) {
                return d.dy - 1;
            })
            .style("fill", function (d) {
                return color(d.parent.name);
            });

    cell.append("svg:text")
            .attr("x", function (d) {
                return d.dx / 2;
            })
            .attr("y", function (d) {
                return d.dy / 2;
            })
            .attr("dy", ".35em")
            .attr("text-anchor", "middle")
            .text(function (d) {
                return d.name;
            })
            .style("opacity", function (d) {
                d.w = this.getComputedTextLength();
                return d.dx > d.w ? 1 : 0;
            });

    d3.select(window).on("click", function () {
        zoom(root);
    });

    d3.select("select").on("change", function () {
        d3_treemap.value(this.value == "size" ? size : count).nodes(root);
        zoom(node);
    });


</script>

</body>
</html>
